<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/component/common.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
   <%@include file="/WEB-INF/jsp/component/commonHead.jsp" %>
	<!-- theme1.0 css -->
	<link href="${theme}/style/data.css" rel="stylesheet">
</head>

<body>
	<%@include file="exam4Person.jsp" %>

	<div class="select">
	<span>
		<i class="select1" onclick="selectExam('exams9')">心血管</i>
	</span>
	<span>
		<i class="select2" onclick="selectExam('exams10')">糖尿病</i>
	</span>
	<span>
		<i class="select3" onclick="selectExam('exams8')">尿液</i>
	</span>
	<span>
		<i class="select4" onclick="selectExam('exams7')">体温</i>
	</span>
	<span>
		<i class="select5" onclick="selectExam('exams6')">心电分析</i>
	</span>
	<span>
		<i class="select6" onclick="selectExam('exams5')">血氧</i>
	</span>
	<span>
		<i class="cur select7" onclick="selectExam('exams4')">血脂</i>
		<table id="table5" >
		  <thead>
		    <tr>
				<th class="w169">时间</th>
				<th class="w169">总胆固醇mmol/L</th>
				<th class="w169">甘油三酯mmol/L</th>
				<th class="w169">高密度脂蛋白mmol/L</th>
				<th class="w169">低密度脂蛋白mmol/L</th>
			</tr>
		  </thead>
			<tbody></tbody>
			<tfoot>
			 	<tr>
		         <td class="last" colspan="5" ><ul id="table5Page" class="pagination-sm" style="margin:0px;line-height: 28px"></ul></td>
	             </tr>
			</tfoot>
		</table>
	</span>
	<span>
		<i class="select8" onclick="selectExam('exams3')">血糖</i>
	</span>
	<span class="seven">
		<i class="select9" onclick="selectExam('exams2')">血压</i>
	</span>
	<span>
		<i class="select10" onclick="selectExam('exams1')">人体成分</i>
	</span>
</div>
 
<div class="cl"></div>
<!-- 曲线图 -->
<div class="date" style="height:20px">
<!--  	<select>
		<option>2015-7-10</option>
	</select>
	<select>
		<option>今天</option>
	</select>-->
</div>
<span>总胆固醇、高密度脂蛋白、低密度脂蛋白、甘油三脂(mmol/L)</span>
<div class="pressure" id="chart5_1"></div>
<div id="showDetailModel" class="modal fade" tabindex="-1" ></div>
<%@include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
	<!-- DataTables JavaScript -->
	<script src="${js}/jquery.twbsPagination.min.js"></script>
	<script src="${theme}/js/data.js" type="text/javascript"></script>
	<script>
	var startPage = 1;
	var totalPages = 0;
		$(document).ready(function() {
			$("#jktj").click();
			examList();
			selectExamList();
			
			findTableDate5();
			initDateTable5();
			
			initCharts();
		});

		
		function initDateTable5() {
			$('#table5').dataTable({
				"bStateSave" : true,
				"bPaginate" : false, 
				"bInfo" : false, //页脚信息
				"bFilter" : false, //过滤功能
				"aoColumns" : [ {
						"mData" : "testTime",
						"orderable" : false,
						"sDefaultContent" : "",
						"mRender": function(data, type, full){
							  var dt = data.substring(0,10);
							  var tm = data.substring(11,20);
			            	  var inner = "<a href='#' onclick=showRecordDetail('106','"+dt+"','"+tm+"') >"+data+"</a>";
			            	  return inner;
			            } 
					}, {
						"mData" : "totalCholesterol",
						"orderable" : false,
						"sDefaultContent" : ""
					},{
						"mData" : "highDensityLipoprotein",
						"orderable" : false,
						"sDefaultContent" : ""
		            },{
						"mData" : "lowDensityLipoprotein",
						"orderable" : false,
						"sDefaultContent" : ""
					},{
						"mData" : "triglyceride",
						"orderable" : false,
						"sDefaultContent" : ""
					}
				 ]
			});
		}
		
		var t5_totalPages=0;
		var t5_startPage=1;
		function table5Page(t5_totalPages, t5_startPage) {
			$('#table5Page').twbsPagination({
				totalPages : t5_totalPages,
				startPage : t5_startPage,
				visiblePages : 5,
				first : '首页',
				last : '末页',
				prev : '上一页',
				next : '下一页',
				onPageClick : function(event, page) {
					t5_startPage = page;
					findTableDate5(t5_startPage);
				}
			});
		}
		
		function findTableDate5(t5_startPage){
			var idCard = "${patient.idCard}";
			var ajaxUrl = "${ctx}/Exam/findTableDate";
			$.ajax({
				type : "post",
				url : ajaxUrl,
				data : {
					size : 5,//每页条数
					page : t5_startPage, //当前页
					idCard : idCard,
					obj:"bloodFat"
				},
				dataType : "json",
				success : function(json) {
					//var da = JSON.stringify(json);
					//$("#jsonDate").html(da);
					t5_totalPages = json.totalPages;
					t5_startPage = json.number + 1;
					if(t5_totalPages==0){
						$('#table5').dataTable().fnClearTable();
					}else{
						$('#table5').dataTable().fnClearTable();
						$('#table5').dataTable().fnAddData(json.content,true);
					}
					table5Page(t5_totalPages, t5_startPage);
				}
			});
		}
		
		var myChart1 =  echarts.init(document.getElementById('chart5_1'));
		function initCharts(){
			myChart1.showLoading({
			    text: '正在努力的读取数据中...',    //loading话术
			});
			chart5_1(myChart1);
		}
		
		function chart5_1(myChart){
			var itemCode = "106001,106002,106003,106004";
			var d1 = [];
			var d2 = [];
			var d3 = [];
			var d4 = [];
			var idCard = "${patient.idCard}";
		    var url="${ctx}/Exam/searchResult";
    	  $.ajax({
    		 url:url,
    		 type:"post",
    		 dataType:"json",
    		 data:{
    			 idCard:idCard,
    			 itemCode:itemCode
    		 },
    		 success:function(data){
    			 var obj = eval(data);
    			 var label1= obj[0].label;
    			 var label2= obj[1].label;
    			 var label3= obj[2].label;
    			 var label4= obj[3].label;
    			 var data1 = makeData(obj[0].chartDatas,d1);
    			 var data2 = makeData(obj[1].chartDatas,d2);
    			 var data3 = makeData(obj[2].chartDatas,d3);
    			 var data4 = makeData(obj[3].chartDatas,d4);
    			 var options = setOption2(label1,label2,label3,label4,data1,data2,data3,data4);
    			 myChart.hideLoading();
    			 myChart.setOption(options);
    		 }
    	  });
		}
		
		//var model1 = $("#showDetailModel");
		var model1 = window.parent.$("#dialog-Show");
		function showRecordDetail(code,date,time){
			 var idCard = "${patient.idCard}";
			 var testKindCode = code;
			 var testTime = date+" "+time;
			 var url="${ctx}/HealthReport/showDetail?"+
					 "idCard="+idCard+"&testKindCode="+testKindCode+"&dateStr="+date+"&timeStr="+time;
			 setTimeout(function(){
				 model1.load(url,'',function(){
					 model1.modal();
		    		});
		    	},500);     
		}
		
		function setOption2(label1,label2,label3,label4,data1,data2,data3,data4){
			// 图表使用参数-------------------
			var option = {
			    legend: {                                   // 图例配置
			        data: [label1,label2,label3],
			    },
			    tooltip: {                                  // 气泡提示配置
			        trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
			        formatter : function (params) {
			            var date = new Date(params.value[0]);
			            data = date.getFullYear() + '-'
			                   + (date.getMonth() + 1) + '-'
			                   + date.getDate() + ' '
			                   + date.getHours() + ':'
			                   + date.getMinutes();
			            return data + '<br/>'
			                  +params.seriesName+":"+ params.value[1];
			        }
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            dataView : {show: false, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: false}
			        }
			    },
			    dataZoom: {
			        show: false,
			        start : 0
			    },
			    xAxis: [                                    // 直角坐标系中横轴数组
			        {
			            type: 'time',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
			            boundaryGap: [0.1, 0.1]
			        }
			    ],
			    yAxis: [                                    // 直角坐标系中纵轴数组
			        {
			            type: 'value',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
			            boundaryGap: [0.1, 0.1]            // 坐标轴两端空白策略，数组内数值代表百分比
			        }
			    ],
			    series: [
			        {
			            name: label1,                        // 系列名称
			            type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
			            showAllSymbol: true,
			            data: (function () {
			                var d = [];
			                d = data1;
			                return d;
			            })()
			        },
			        {
			            name: label2,                       
			            type: 'line',                       
			            showAllSymbol: true,
			            data: (function () {
			                var d = [];
			                d = data2;
			                return d;
			            })()
			        },
			        {
			            name: label3,                       
			            type: 'line',                       
			            showAllSymbol: true,
			            data: (function () {
			                var d = [];
			                d = data3;
			                return d;
			            })()
			        }
			    ]
			};
			return option;
		}
	</script>
</body>
</html>